<template>
  <div class="container">
    <div class="main_box"></div>
    <div class="header">
      <div class="time">
        {{ date }}
      </div>
      <div class="content">
        <div class="zsfx" @click="toZs"></div>
        <div
          :class="route.name === 'home' ? 'yyf' : 'yyfx2'"
          class="yyfx"
        ></div>
      </div>
    </div>
    <div class="body_box">
      <div class="left">
        <div class="state_num">
          <div class="sjzt head_title"></div>
          <BusinessNum :data="infoData1"></BusinessNum>
        </div>
        <div class="num_ans">
          <div class="khsl head_title"></div>
          <CustomerNum :data="infoData2"></CustomerNum>
        </div>
        <div class="fee">
          <div class="khqf head_title"></div>
        </div>
      </div>
      <div class="center">
        <div class="count">
          <Aera v-if="flag" :data="infoData3"></Aera>
        </div>
        <div class="yq_num">
          <div class="yqkhsl head_title"></div>
          <ParkNum :data="infoData4" :numData="infoData7"></ParkNum>
        </div>
      </div>
      <div class="right">
        <div class="rental">
          <div class="yqczqk head_title"></div>
          <RentalSituation :data="infoData5"></RentalSituation>
        </div>
        <div class="lease">
          <div class="tztj2 head_title"></div>
          <LeaseStatistics :data="infoData6"></LeaseStatistics>
        </div>

        <div class="rental_info">
          <div class="tzqyxx head_title"></div>
          <ScrollTable
            v-if="flag"
            :tableData="tableData"
            :lables="['编号', '合同编号', '企业名称', '退租面积']"
            :isRent="true"
          >
          </ScrollTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import autofit from "autofit.js";
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  NewGetOverview,
  getMeasureList,
  getParkOverview,
  getRoomListAll,
  getYearMonthList,
  getLeaseSurrender,
} from "@/api";

import BusinessNum from "../components/charts/businessNum.vue";
import CustomerNum from "../components/charts/customerNum.vue";
import Aera from "../components/charts/Aera.vue";
import ParkNum from "../components/charts/parkNum.vue";
import RentalSituation from "../components/charts/rentalSituation.vue";
import LeaseStatistics from "../components/charts/leaseStatistics.vue";
import ScrollTable from "../components/charts/scrollTable.vue";

import dayjs from "dayjs";

const date = ref();
const router = useRouter();
const route = useRoute();
const flag = ref(false);
const infoData1 = ref();
const infoData2 = ref();
const infoData3 = ref();
const infoData4 = ref();
const infoData5 = ref();
const infoData6 = ref();
const infoData7 = ref();

const tableData = ref();

const getNewGetOverview = async () => {
  const res = await NewGetOverview();
  infoData1.value = res.data.monthAdd;
  infoData2.value = res.data.corpList.map((item) => {
    return { name: item.typeName, value: item.count, type: item.type };
  });
  infoData7.value = {
    oppoType1: res.data.oppoTypeList[0].count,
    oppoType2: res.data.oppoTypeList[1].count,
  };
};
const getMeasure = async (data) => {
  const res = await getMeasureList(data);
  infoData3.value = res.data;
};
const getParkOverviewList = async () => {
  const res = await getParkOverview();
  infoData4.value = res.data.parkOverview.map((item) => {
    return {
      name: item.parkName,
      new: item.corpCountVos.find((item) => item.type == 2).count,
      renewal: item.corpCountVos.find((item) => item.type == 3).count,
      type: item.parkType,
    };
  });
};
const getRoomList = async () => {
  const res = await getRoomListAll();
  infoData5.value = res.data.list.map((item) => {
    return {
      name: item.parkName,
      rent: item.rentedRoomNum,
      unRent: item.unRentedRoomNum,
      type: item.roomType,
    };
  });
};
const getYearMonth = async (data) => {
  const res = await getYearMonthList(data);
  tableData.value = res.data.list
    .map((item) => {
      return {
        id: item.id,
        partyACorpId: item.sn,
        name: item.corpName,
        area: item.area,
      };
    })
    .sort((a, b) => {
      return Date.parse(a.doubleLandTime) - Date.parse(b.doubleLandTime);
    });
  console.log(res.data);
};
const getLeaseSurrenderList = async () => {
  const res = await getLeaseSurrender({ date: 2024 });
  const res1 = await getLeaseSurrender({ date: 2025 });

  infoData6.value = {
    area: res.data.yearStatistics.area,
    count: res.data.yearStatistics.count,
    list: res.data.monthStatistics.slice(0, 12).map((item) => {
      return {
        value: item.area,
        name: new Date(item.date).getMonth() + 1 + "月",
      };
    }),
    list2: res1.data.monthStatistics.slice(0, 12).map((item) => {
      return {
        value: item.area,
        name: new Date(item.date).getMonth() + 1 + "月",
      };
    }),
  };
};
onMounted(() => {
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "body",
    resize: true,
  });
  getNewGetOverview();
  getMeasure({});
  getParkOverviewList();
  getRoomList();
  getYearMonth({ date: 2024, page: 1, rows: 10 });
  getLeaseSurrenderList();
  flag.value = true;
  setInterval(() => {
    date.value = dayjs().format("YYYY.MM.DD 星期d HH:mm:ss");
  }, 1000);
});
const toZs = () => {
  router.push("/about");
};
</script>

<style scoped>
.container {
  padding: 0;
  position: relative;
  width: 100%;
  height: 1446px;
  mix-blend-mode: multiply;

  background: url("../img/bgc.jpg") no-repeat;
  background-size: cover;
}

.main_box {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.4;

  background: linear-gradient(
    180deg,
    #029edb 0%,
    #009dde 15%,
    #00587c 63%,
    #00557a 100%
  );
}

.header {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 112px;
  opacity: 1;
  background: url("../img/header.png") no-repeat;
  background-size: cover;
}

.content {
  position: absolute;
  width: 1120px;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
}

.content div {
  width: 195px;
  height: 47.77px;
}

.time {
  width: 400px;
  height: 50px;
  display: flex;
  box-sizing: border-box;
  padding-left: 50px;
  padding-top: 20px;
  color: #fff;
}

.yyfx {
  background: url("../img/yyfx.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}
.yyfx2 {
  background: url("../img/yyfx2.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}

.zsfx {
  background: url("../img/zsfx2.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}

.body_box {
  position: absolute;
  width: 100%;
  height: 67%;
  top: 110px;
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.left {
  width: 25%;
  height: 100%;
  margin-left: 10px;
  box-sizing: border-box;
}

.center {
  margin-left: 5px;
  margin-right: 5px;

  width: 50%;
  display: flex;
  flex-direction: column;

  height: 100%;
  box-sizing: border-box;
}
.right {
  width: 25%;
  height: 100%;
  box-sizing: border-box;
  margin-right: 10px;
}

.count {
  width: 100%;
  height: 219px;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.yq_num {
  width: 100%;
  flex: 1;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.rental {
  width: 100%;
  height: 33%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.lease {
  width: 100%;
  height: 33%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
  margin-top: 5px;
}

.rental_info {
  width: 100%;
  height: 33%;
  opacity: 1;
  margin-top: 5px;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.state_num {
  left: 23px;
  top: 125px;
  width: 100%;
  height: 35%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.num_ans {
  margin-top: 5px;
  width: 100%;
  height: 30%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.fee {
  margin-top: 5px;
  width: 100%;
  height: 34%;
  opacity: 1;

  background: rgba(64, 112, 146, 0.26);

  box-sizing: border-box;
  border: 1px solid #42c4c9;

  backdrop-filter: blur(30px);
}

.head_title {
  width: 90%;
  height: 40px;

  margin-left: 9px;
  box-sizing: border-box;
}

.sjzt {
  background: url("../img/sjzt.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.khsl {
  background: url("../img/khsl.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.khqf {
  background: url("../img/khqf.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.yqkhsl {
  width: 90%;

  height: 100px;

  background: url("../img/yqkhsl.png") no-repeat;
}

.yqczqk {
  background: url("../img/yqczqk.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.tztj2 {
  background: url("../img/tztj2.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.tzqyxx {
  background: url("../img/tzqyxx.png") no-repeat;
  background-size: cover;
  background-position: center;
}
</style>
